<template>
  <div class="right_content">
    <p id="gushici"></p>
    <p id="origin"></p>
    <p id="author"></p>
    <button @click="chang" class="replace">换一句</button>
  </div>
</template>
<script>
export default {
  mounted() {
    this.chang();
  },
  methods: {
    chang() {
      var xhr = new XMLHttpRequest();
      xhr.open("get", "https://v1.jinrishici.com/all.json");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          var data = JSON.parse(xhr.responseText);
          var gushici = document.getElementById("gushici");
          var author = document.getElementById("author");
          var origin = document.getElementById("origin");
          gushici.innerText = data.content;
          author.innerText = data.author;
          origin.innerText = `《${data.origin}》`;
        }
      };
      xhr.send();
    },
  },
};
</script>

<style lang="scss" scoped>
.right_content {
  margin-top: 80px;
  text-align: center;
}
#gushici {
  font-size: 40px;
  margin-left: 20%;
  color: black;
  width: 680px;
}
.replace {
  border: 0;
  outline: none;
  background-color: #28a745;
  color: white;
  width: 80px;
  height: 30px;
  border-radius: 10px;
}
</style>